<template>
	<view class="index-container">
		<view class="titleStyPOs">
			<div style="height:50rpx"></div>
			<div class="header">
				<div class="back flex-start ml-30 mr-30 mt-20" @click="back">
					<image src="../../../static/icon/back.png" mode="" class="w-20 h-30"></image>
				</div>
				<u-search placeholder="请搜索" :showAction="false" :animation="false" bgColor="#fff" v- model="keyword"
					class="searchSty" @search="goFilter"></u-search>
					<view class="flex-start flex-start">
						<!-- <image src="../../../static/icon/positionIcon (2).png" mode="" class="w-22 h-22"></image> -->
						<view class="transport">
							<view class="transport_name">
								<!-- <citySelect :text="paramsList.city_name" @confirm="e => {
									paramsList.city_id=e.column3.value
									paramsList.city_name = e.column3.label;
								}" /> -->
								<city :value="paramsList.city_name" @change="e => {
									paramsList.city_id = e.column3.value;
									paramsList.city_name = e.column1.value == -1 ? '不限' : (e.column1.label + '-' + e.column2.label + '-' + e.column3.label);
								}">
									<p class="fz26 text-888" style="text-align:center">{{ paramsList.city_name || "请选择" }}</p>
								</city>
							</view>
							<u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
						</view>
					</view>
			</div> 
			<div class="list-title w-full">
				<view v-for="item in list" class="commonTitle" :class="{active: item.id==current}" @click="sectionChange(item.id)">
					{{ item.name }}
				</view>
			</div>
		</view>
		<view style="height: 250rpx;"></view>
		<view class="ml-24 mr-24 rounded-26" style="">
			<view class="" v-for="(item, index) in liveList" @click="goDetail(item)">
				<view class="flex-start infoBoxSty">
					<view class="center flex">
						<image :src="IMAGE_URL + (item.images && item.images.length > 0 && item.images[0])" mode="widthFix" class="w-170 h-full mt-24 ml-24 mb-24"></image>
					</view>
					<view class="flex-1">
						<p class="text-010 fz28 pt-40 ml-24 font-bold">{{item.person_name}}</p>
						<p class="priceSty"> <span class="fz20">￥</span> {{item.price}} ~ {{item.price2}}</p>
						<view class="between ml-15 mr-15 pb-15 mt-10 infoBg">
							<view class="mt-15">
								<image :src="IMAGE_URL + get(item, 'user.avatar')" mode="" class="w-35 h-35 vam rounded-500"></image>
								<span class="fz18 text-888 ml-20" style="display: inline-block;width: 280rpx;">{{get(item, 'user.nickname')}}</span>
							</view>
							<view class="flex mr-30">
								<view class="mt-15">
									<image src="../../../static/images/user/newUI/watchIcon.png" mode="" class="w-20 h-20 vam"></image>
									<span class="fz22 text-888 ml-8">{{item.num}}</span>
								</view>
								<view class="mt-15 ml-20">
									<image src="../../../static/images/user/newUI/saveIcon.png" mode="" class="w-20 h-20 vam"></image>
									<span class="fz22 text-888 ml-8">{{item.zan}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
		<view class="releaseBox" @click="sendAdvertising">
			 <image src="../../../static/icon/releaseIcon.png" mode="" class="w-40 h-40"></image>
			 <p class="fz24 text-white mt-10">发布</p>
		</view>
		
		<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">没有更多了</div>
		<view class="h-50"></view>
	</view>
</template>

<script>
	import { getCcateProfessional, getProfessionalList  } from '@/api/user'
	import citySelect from "./components/citySelect.vue"
	
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				list: [],
				current: 767,
				keyword: '',
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				nomore: false,
				paramsList:{
					scope_category_id: '767',
					city_id: '',
					city_name: '',
					page: 1,
					limit: 10,
					searchKey: ''
				},
				liveList: []
			}
		},
		mounted() {
			this.getCcateProfessional(),
			this.getProfessionalList(true)
		},
		watch: {
			'paramsList.city_id': {
				handler(val) {
					console.log(this.paramsList.city_id)
					this.getProfessionalList(true)
				},
			}
		},
		methods: {
			goFilter(e) {
				this.paramsList.searchKey = e
				console.log('0===1-10', this.paramsList.searchKey)
				this.getProfessionalList(true)
			},
			getCcateProfessional() {
				const that = this;
				that.$u.api.user.getCcateProfessional().then(res => {
					this.list = res
				})
			},
			//下拉刷新
			onPullDownRefresh() {
				this.getProfessionalList(true)
			},
			//上拉加载
			onReachBottom() {
				this.paramsList.page++
				this.getProfessionalList()
			},
			getProfessionalList(init) {
				if (init) {
					this.paramsList.page = 1
					this.nomore = false;
				}
				console.log('8888888', this.paramsList)
				this.$u.api.user.getProfessionalList(this.paramsList).then(res => {
					if (this.paramsList.page == 1) {
						this.liveList = res
					} else {
						this.liveList = [...this.liveList, ...res]
					}
					//当前请求的列表是空的 那就是没有更多了
					if (res.length == 0) {
						this.nomore = true;
					}
					// 结束下拉刷新
					uni.stopPullDownRefresh()
				})
			},
			
			sectionChange(index) {
				this.keyword = ''
				this.paramsList.searchKey = ''
				this.current = index
				this.paramsList.scope_category_id = index
				this.getProfessionalList(true)
			},
			back() {
				uni.navigateBack()
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/tabbar/professionalList/professDetail/professDetail?item=${JSON.stringify(item)}`
				})
			},
			sendAdvertising() {
				uni.navigateTo({
					url: '/pages/tabbar/professionalList/sendAdvertis'
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F6F7FB;
	}
	.index-container {
		width: 100%;
		height: 100%;
		// background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
		// position: relative;
		// z-index: 5;
		// position: fixed;
		// z-index: 60;
	}
	.titleStyPOs {
		background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
		position: fixed;
		width: 100%;
		z-index: 10;
	}
	.infoBoxSty {
		background-color: #fff;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}
	// .infoBoxSty:first-child{
	// 	border-radius: 26rpx 26rpx 0 0;
	// }
	.liveBoxLeft {
		float: left;
		width: 50%;
		image {
			width: 340rpx;
			height: 326rpx;
		}
		.liveInfoBox {
			width: 340rpx;
			min-height: 100rpx;
			border-radius: 0 0 18rpx 18rpx;
		}
	}
	.liveBox {
		width: 50%;
		float: right;
		image {
			width: 340rpx;
			height: 326rpx;
		}
		.liveInfoBox {
			width: 340rpx;
			min-height: 100rpx;
			border-radius: 0 0 18rpx 18rpx;
		}
	}
	
	.header {
		width: 100%;
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		display: flex;
		justify-content: flex-start;
		padding-top: var(--status-bar-height);
	
		.searchSty {
			width: 65% !important;
			// height: 78rpx;
			margin-left: 34rpx;
			margin-right: 34rpx;
			display: block !important;
			flex: none !important;
			margin-top: 30rpx;
			// /deep/ .u-search {
			// }
			
			/deep/ .u-search__content {
				height: 100%;
				margin-left: 68rpx;
				margin-top: 24rpx;
			}
	
			/deep/ .u-search__content__input--placeholder {
				color: #8C8C8C;
				font-family: "PingFang SC";
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				margin-left: 13rpx;
			}
	
			/deep/ .u-icon__icon {
				font-size: 40rpx !important;
				margin-top: 6rpx;
			}
		}
	}
	
	.transport {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 80rpx;
		// border-radius: 20rpx;
		// background: #F6F7FB;
		// padding: 0 20rpx 0 20rpx;
	
		.transport_name {
			width: 130rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #0e0e0e;
			font-size: 22rpx;
			line-height: 30px;
		}
	}
	
	.list-title {
		width: 100%;
		// height: 70rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		// width: 100%;
		// display: flex;
		// justify-content: flex-start;
		padding-top: 35rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
		// flex-wrap: nowrap;
		// height: 100rpx;
	
		.commonTitle {
			// width: 168rpx;
			// height: 64rpx;
			// flex: 0 0 auto;
			// border-radius: 500rpx;
			// background: #F7F7F7;
			// color: #333;
			// font-family: "PingFang SC";
			// font-size: 24rpx;
			// font-style: normal;
			// font-weight: 400;
			// line-height: center;
			// margin-left: 20rpx;
			// width: 115rpx;
			height: 46rpx;
			flex: 0 0 auto;
			// width: 120rpx;
			font-size: 28rpx;
			color: #535353;
			margin-left: 25rpx;
		}
	
		.active {
			font-size: 28rpx;
			color: #278AFF;
			font-weight: 600;
			border-bottom: 4rpx solid #278AFF;
		}
	}
	.priceSty {
		color: #FF7000;
		font-size: 30rpx;
		margin-left: 16rpx;
		margin-top: 20rpx;
	}
	.infoBg {
		background-image: url('../../../static/images/user/newUI/userinfoBg.png');
	}
	.releaseBox {
		width: 156rpx;
		height: 156rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		box-shadow: 0rpx 4rpx 13.8rpx 0rpx #DEE1EF;
		box-shadow: -2rpx -6rpx 9.9rpx 0rpx #71D0FF inset;
		box-shadow: -4rpx 5rpx 6.5rpx 0rpx #C8FBFF75 inset;
		position: fixed;
		z-index: 10;
		right: 40rpx;
		bottom: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
